<script setup>
import { hotSearch, searchResultList } from '@/api/Search'
import { ref } from 'vue'
const hotArr = ref([])

const getHotArr = async () => {
  const res = await hotSearch()
  console.log(res)
  hotArr.value = res.data.hots
}

// 文本框输入数据
const searchVal = ref('')
// 搜索结果
const resultList = ref([])


let timer = null 

//  这里调用获取数据方法的时候 , 为啥单独封装一个函数 , 因为后边好几个地方要用
const getListFn =  () => {
  clearTimeout(timer)

  timer = setTimeout(async ()=>{

      // keywords  接口文档
      const res = await searchResultList({
        keywords: searchVal.value,
        limit: 20,
        offset: (page.value - 1) * 20
      })
      // 把拿到的数据保存到数组中 追加

      let result = isSearch.value ? res.data:[...resultList.value,  ...res.data]
      resultList.value =result

      isSearch.value = false
  },500)



}

// const arr: string[]

//  arr:  Array<string>

const fn = async (val) => {
  // 点击热搜关键词
  searchVal.value = val // 选中的关键词显示到搜索框

  page.value=1
  getListFn()

  console.log(val)
}

getHotArr()

const reset = () => {
  searchVal.value = ''
  resultList.value = []
}


const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const onLoad = async () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  page.value++
  await getListFn()
  loading.value = false
}

// 如果 isSearch为true  说明是搜索框
// 否则就是  下拉触底
let  isSearch =  ref(false)
const inputFn = async () => {
  // 输入框值改变
  if (searchVal.value.length === 0) {
    // 搜索关键词如果没有, 就把搜索结果清空阻止网络请求发送(提前return)
    resultList.value = []
    return
  }

  isSearch.value =  true 
  // 有值的话 直接发送数据请求
  getListFn()
}


   const refreshLoading = ref(false);
    const onRefresh = () => {
      // 重置操作
     page.value = 1 
      // 不要追加   把isSearch 重置为true 
       isSearch.value =  true 
    getListFn()
      refreshLoading.value = false
    }


</script>

<template>
  <!-- //shape: 搜索框形状，可选值为 round  (shape:形状) -->
  <van-search
    @clear="reset"
    v-model="searchVal"
    shape="round"
    placeholder="请输入搜索关键词"
    @input="inputFn"

  />
  <!-- 搜索下容器 -->
  <div class="search_wrap" v-if="resultList.length === 0">
    <!-- 标题 -->
    <p class="hot_title">热门搜索</p>
    <!-- 热搜关键词容器 -->
    <div class="hot_name_wrap">
      <!-- 每个搜索关键词 -->
      <span
        @click="fn(obj.first)"
        class="hot_item"
        v-for="(obj, index) in hotArr"
        :key="index"
        >{{ obj.first }}</span
      >
    </div>
  </div>

  <!-- 搜索结果 -->
  <div v-else class="search_wrap">

  <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
    <!-- 标题 -->
    <p class="hot_title">最佳匹配</p>






   <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="20"
    >
      <van-cell center v-for="obj in resultList" :key="obj.id" :title="obj.name">
        <template #right-icon>
          <van-icon name="play-circle-o" class="van-icon-result" />
        </template>
      </van-cell>
    </van-list>


    </van-pull-refresh>

  </div>
</template>

<!-- 
    鸿蒙项目介绍：
     

 -->

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 10px;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 18px;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 10px 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 20px;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 20px;
  color: #333;
  border-color: #d3d4da;
  border-radius: 15px;
  border: 1px solid #d3d4da;
}

.van-icon-result {
  font-size: 22px;
}
</style>
